<template>
  <div>
    <el-button @click="appear">新增</el-button>
    <el-drawer :visible.sync="playerInsertVisible" size="60%">
      <el-form
        ref="player"
        :model="player"
        :rules="rules"
        label-position="right"
        label-width="120px"
      >
        <el-form-item prop="nickname" label="昵称：">
          <el-input v-model.trim="player.nickname"> </el-input>
        </el-form-item>

        <el-form-item prop="usernameFk" label="外键：">
          <el-input v-model="player.usernameFk"> </el-input>
        </el-form-item>

        <el-form-item prop="profession" label="职业：">
          <el-select v-model="player.profession">
            <template v-for="(e, i) in professionsEnums">
              <el-option :key="i" :value="e.value" :label="e.text"> </el-option>
            </template>
          </el-select>
        </el-form-item>

        <el-form-item prop="goldCoin" label="金币数量：">
          <el-input-number v-model="player.goldCoin"> </el-input-number>
        </el-form-item>
        <el-form-item prop="silverCoin" label="银币数量：">
          <el-input-number v-model="player.silverCoin"> </el-input-number>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-edit" @click="playerSubmit()"
            >提交
          </el-button>
          <el-button
            type="warning"
            icon="el-icon-remove"
            @click="() => $refs.player.resetFields()"
            >重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>
<script>
const professionsEnums = [
  {
    index: 0,
    text: "建筑师",
    value: "architect",
  },
  {
    index: 1,
    text: "会计师",
    value: "accountant",
  },
  {
    index: 2,
    text: "巫师",
    value: "wizard",
  },
  {
    index: 3,
    text: "作家",
    value: "writer",
  },
];
/**
 * 页面核心数据结构体说明文档
 *
 *
 */
// import New from './components/New.vue';
export default {
  name: "PlayerInsert",
  components: {
    // New,Old,
  },
  props: {
    sampleP: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      sampleD: "value",
      playerInsertVisible: false,
      player: {
        nickname: "张三",
        usernameFk: "020202",
        profession: "architect",
        goldCoin: 10,
        silverCoin: 30,

        playerCode: "030022",
        playerId: 0,
        version: 0,
      },
      professionsEnums,
      rules: {
        nickname: [{ required: true, message: "请输入名称", trigger: "blur" }],
        usernameFk: [
          {
            pattern: /^\w+$/,
            message: "请输入字母/数字/下划线",
            trigger: ["blur", "change"],
          },
        ],
      },
    };
  },
  computed: {
    // sampleC() {
    //     return this.sampleD+'--';
    // }
  },
  created() {},
  mounted() {},
  methods: {
    sampleM() {},
    appear() {
      this.playerInsertVisible = true;
    },
    playerSubmit() {
      this.$refs.player.validate((valid) => {
        if (valid) {
          this.$http({
            method: "post",
            url: "http://localhost:9090/ceto/player/insert",
            data: this.player,
          }).then(
            (res) => {
              this.playerInsertVisible = false;
              this.$message.warning(JSON.stringify(res.data));
              this.$emit("postSubmit", 1);
            },
            (error) => {
              console.log(".player request error : " + error.response.status);
            }
          );
        } else {
          this.$message.warning("验证不通过请重新填写表单");
        }
      });
    },
  },
  watch: {
    // sampleC(newValue, oldValue) {
    //
    // }
  },
};
</script>

<!--<style scoped>-->
<style lang="scss" scoped>
.el-form {
  width: 500px;
  margin-left: 100px;
}
</style>
